@extends('mobile.common.main')
@section('container')
<style>
    .tw-apply img {
        display: block;
        width: 100%;
    }

    .tw-apply .banner {
        position: relative;
    }

    .tw-apply fieldset {
        position: absolute;
        bottom: 1rem;
        width: 80%;
        left: 10%;
        border: 2px solid #FCCA00;
        text-align: center;
        color: #FCCA00;
        font-size: .36rem;
    }

    .tw-apply fieldset legend {
        font-size: .48rem;
        padding: 0 .5rem;
    }

    .tw-apply fieldset .txt {
        margin: .2rem 0;
    }

    .tw-apply .form {
        margin: .5rem .4rem;
        padding: .5rem .4rem .1rem;
        background-color: #F0F0F0;
    }

    .tw-apply .form li {
        font-size: 0;
        padding-bottom: .5rem;
    }

    .tw-apply .form select {
        -webkit-appearance: none;
        -moz-appearance: none;
        width: 100%;
        background-color: #FFF;
        border: 1px solid #CCC;
        height: .8rem;
        font-size: .24rem;
        -webkit-box-sizing: border-box;
        -moz-box-sizing: border-box;
        box-sizing: border-box;
        padding: 0 .2rem;
    }

    .tw-apply .form input {
        -webkit-appearance: none;
        -moz-appearance: none;
        width: 100%;
        background-color: #FFF;
        border: 1px solid #CCC;
        height: .8rem;
        font-size: .24rem;
        -webkit-box-sizing: border-box;
        -moz-box-sizing: border-box;
        box-sizing: border-box;
        padding: .2rem;
    }

    .tw-apply .form textarea {
        -webkit-appearance: none;
        -moz-appearance: none;
        width: 100%;
        border: 1px solid #CCC;
        height: 2.4rem;
        font-size: .24rem;
        -webkit-box-sizing: border-box;
        -moz-box-sizing: border-box;
        box-sizing: border-box;
        padding: .2rem;
    }

    .tw-apply .form button {
        -webkit-appearance: none;
        -moz-appearance: none;
        margin: 0 auto;
        display: block;
        width: 4rem;
        height: .8rem;
        line-height: .8rem;
        font-size: .32rem;
        text-align: center;
        border: 0 none;
        background-color: #FCCA00;
        text-shadow: 0 1px 1px rgba(0, 0, 0, .35);
        color: #FFF;
    }

    .tw-apply .apply {
        font-size: .26rem;
        padding: .5rem .3rem 0;
        overflow: hidden;
    }

    .tw-apply .apply dl {
        padding-bottom: .3rem;
    }

    .tw-apply .apply dl:last-child {
        padding-bottom: 0;
    }

    .tw-apply .apply dt {
        float: left;
        width: 4em;
        color: #008ED3;
    }

    .tw-apply .apply dt img {
        display: block;
        width: 100%;
    }

    .tw-apply .apply dd {
        padding-top: .1rem;
        margin-left: 5em;
    }

    .tw-apply .apply .item {
        margin-bottom: .2rem;
    }

    .tw-apply ol.list {
        font-size: .26rem;
        padding: .3rem 1rem;
    }

    .tw-apply ol.list li {
        margin-top: .2rem;
    }

    .tw-apply .flex {
        padding: .5rem .2rem;
        overflow: hidden;
    }

    .tw-apply .flex li {
        width: 25%;
        float: left;
        text-align: center;
        font-size: .26rem;
    }

    .tw-apply .flex li img {
        display: block;
        width: 80%;
        margin: 0 auto .1rem;
    }
</style>
<div class="tw-apply">
    <div class="banner">
        <fieldset>
            <legend>合伙人共创计划</legend>
            <div class="txt">协同合作 &nbsp; 资源扶持 &nbsp; 项目收益</div>
        </fieldset>
        <img src="/img/m/partner/banner.jpg" alt="">
    </div>
    <div class="img-contain">
        <div class="contain">
            <div class="tit">提供大力支持 与合伙人携手共创</div>
        </div>
        <ul class="flex">
            <li>
                <img src="/img/m/partner/ico1.png" alt="">
                <div class="txt">线上接收订单</div>
            </li>
            <li>
                <img src="/img/m/partner/ico2.png" alt="">
                <div class="txt">收入实时到账</div>
            </li>
            <li>
                <img src="/img/m/partner/ico3.png" alt="">
                <div class="txt">生态资源共享</div>
            </li>
            <li>
                <img src="/img/m/partner/ico4.png" alt="">
                <div class="txt">技能培训评估</div>
            </li>
        </ul>
    </div>
    <div class="img-contain">
        <div class="contain">
            <div class="tit">合伙人服务流程 优势互补、省心省力</div>
        </div>
        <div class="apply">
            <dl>
                <dt>
                    <span class="icon"><img src="/img/m/partner/icon3.png" alt=""></span>
                    电站施工
                </dt>
                <dd>
                    <div class="item"><strong>您只需做：</strong>接单后按时到达指定地点进行施工，并在施工过程中上传相应照片</div>
                    <div class="item"><strong>碳银提供：</strong>智能派单、拍照提示、施工验收、施工评价等</div>
                </dd>
            </dl>
            <dl>
                <dt>
                    <span class="icon"><img src="/img/m/partner/icon5.png" alt=""></span>
                    后续运维
                </dt>
                <dd>
                    <div class="item"><strong>您只需做：</strong>接单后按时到达指定地点进行运维，并在运维过程中上传相应照片，填写故障原因等</div>
                    <div class="item"><strong>碳银提供：</strong>智能派单、收益结算、客户评价等</div>
                </dd>
            </dl>
        </div>
    </div>
    <div class="img-contain">
        <div class="contain">
            <div class="tit">我们需要您 具备以下条件</div>
        </div>
        <ol class="list">
            <li>1年以上电站安装、调试、运维管理经验</li>
            <li>1年以上村级电网管理或电力岗位经验</li>
            <li>具有服务工具</li>
            <li>年龄50岁以下</li>
        </ol>
    </div>
    <div class="img-contain">
        <div class="contain">
            <div class="tit">快速填写您的信息，加入我们</div>
        </div>
    </div>
    <div class="form">
        <ul>
            <li>
                <input type="text" id="partner_name" class="text" maxlength="10" placeholder="姓名（必填）">
            </li>
            <li>
                <input type="text" id="address" class="text" maxlength="100" placeholder="地区（必填）">
            </li>
            <li>
                <input type="tel" id="partner_phone" class="text" maxlength="11" placeholder="电话（必填）">
            </li>
            <li>
                <input type="text" id="email" class="text noneed" maxlength="100" placeholder="邮箱（选填）">
            </li>
            <li>
                <textarea class="text noneed" id="desc" maxlength="200"
                          placeholder="目前的项目资源及需求、我们将尽快与您联系、并共同创造财富（选填）"></textarea>
            </li>
            <li>
                <input type="hidden" id="type" value="2">
                <button class="btn" id="j_applySubmit">确认提交</button>
            </li>
        </ul>
    </div>
</div>
@endsection

@section('script')
<script>
    (function ($) {
        $.toast = function (options) {
            var $toast = $('#toast');
            var defaults = {
                msg: '', call: function () {
                    $toast.fadeOut(500);
                }
            };
            try {
                if (typeof options === "string" || typeof options === "number") {
                    options = {msg: options};
                }
                var opts = $.extend(defaults, options);
            } catch (e) {
                console.log(e);
            }

            var toastHtml = '<div style="position:fixed;z-index:1000;top:0;right:0;left:0;bottom:0;"></div>' +
                '<div style="position:fixed;z-index:5000;width:60%;top:4rem;left:50%;margin-left:-30%;background:rgba(17,17,17,.7);text-align:center;border-radius:.1rem;color:#FFF;"><p style="padding:.4rem;line-height:1;font-size:.3rem">' + opts.msg + '</p></div>';
            if ($toast && $toast.length > 0) {
                $toast.html(toastHtml);
            } else {
                $('body').append('<div id="toast" style="position:relative;z-index:9000">' + toastHtml + '</div>');
                $toast = $('#toast');
            }
            $toast.fadeIn(500);
            setTimeout(function () {
                opts.call();
            }, 2000);
        };
    })(Zepto);
    (function ($) {
        $(function () {
            //确认提交
            var $partner_name = $('#partner_name');
            var $partner_phone = $('#partner_phone');
            var $address = $('#address');
            var $email = $('#email');
            var $desc = $('#desc');
            $('#j_applySubmit').on('click', function () {
                if (!$partner_name.val()) {
                    $.toast('请输入姓名');
                    return false;
                }
                var reg;
                if (!$partner_phone.val()) {
                    $.toast('请输入电话');
                    return false;
                } else {
                    reg = /^0?(13|14|15|17|18)[0-9]{9}$/;
                    if (!reg.test($partner_phone.val())) {
                        $.toast({
                            msg: '联系手机格式错误', call: function () {
                                $('#toast').fadeOut(500);
                                $partner_phone.focus();
                            }
                        });
                        return false;
                    }
                }
                if (!$address.val()) {
                    $.toast('请输入地址');
                    return false;
                }
                if ($email.val()) {
                    reg = /^[a-z0-9]+([._\\-]*[a-z0-9])*@([a-z0-9]+[-a-z0-9]*[a-z0-9]+.){1,63}[a-z0-9]+$/;
                    if (!reg.test($email.val())) {
                        $.toast({
                            msg: '邮箱格式错误', call: function () {
                                $('#toast').fadeOut(500);
                                $email.focus();
                            }
                        });
                        return false;
                    }
                }
                var paras = {};
                paras['partner_name'] = $partner_name.val();
                paras['partner_phone'] = $partner_phone.val();
                paras['address'] = $address.val();
                paras['email'] = $email.val();
                paras['desc'] = $desc.val();
                paras['type'] = parseInt($('#type').val());
                var $t = $(this);
                if (!$t.hasClass('dis')) {
                    $t.addClass('dis');
                    $.ajax({
                        url: 'http://api.crm.tanwin.cn/project/partner/join/us',
                        data: paras,
                        type: "POST",
                        dataType: "json",
                        async: false,
                        success: function (data) {
                            $t.removeClass('dis');
                            if (data && data.code === 100) {
                                $.toast('提交成功！');
                            } else {
                                $.toast(data.msg);
                            }
                        },
                        error: function () {
                            $t.removeClass('dis');
                        }
                    });
                }
            });
        });
    })(Zepto);
</script>
@endsection
